<script lang="ts">
import { computed, defineComponent, reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { login, register } from "@/api/user";
import { useStore } from "vuex";
export default defineComponent({
  name: "login",
  setup() {
    /** 用户状态store */
    const store = useStore();
    /** 路由对象 */
    const router = useRouter();
    /** 路由状态对象 */
    const route = useRoute();
    /** 是否需要跳转指定路由 */
    const redirect = ((route.query && route.query.redirect) as string) || "/";
    /** 设置 表单dom元素地址 用于表单验证 */
    const ruleForms = ref<HTMLFormElement | null>(null);
    /** 登录表单数据 */
    const ruleForm = reactive({
      username: "adimn",
      password: "123",
    });
    /** 表单验证 */
    const rules = {
      username: [
        { required: true, message: "请输入用户名", trigger: "change" },
      ],
      password: [{ required: true, message: "请输入密码", trigger: "change" }],
    };
    /** 提交表单 */
    const loginForm = async () => {
      if (!ruleForms.value) {
        return;
      }
      await ruleForms.value.validate(async (valid: boolean) => {
        if (valid) {
          console.log("submit!");
          const res = await store.dispatch("user/login", ruleForm);
          if (res) {
            const routerPath = ["/401", "/404"].includes(redirect)
              ? "/"
              : redirect;
            router.replace(routerPath);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      console.log(ruleForm);
    };
    /** 注册用户 */
    const registerForm = async () => {
      if (!ruleForms.value) {
        return;
      }
      await ruleForms.value.validate(async (valid: boolean) => {
        if (valid) {
          console.log("submit!");
          const a = await register({
            ...ruleForm,
            permissions: ["321", "231"],
          });
          console.log(a);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    return {
      ruleForm,
      rules,
      ruleForms,
      loginForm,
      registerForm,
    };
  },
});
</script>
<template>
  <div class="login">
    <el-row>
      <el-col
        :xs="{ span: 14, offset: 8 }"
        :sm="{ span: 10, offset: 10 }"
        :md="{ span: 7, offset: 10 }"
        :lg="{ span: 6, offset: 16 }"
        :xl="{ span: 4, offset: 16 }"
      >
        <div>
          <el-form
            :model="ruleForm"
            :rules="rules"
            class="login-ruleForm"
            ref="ruleForms"
          >
            <div>
              <h1>hello!</h1>
              <h4>vue3.0 vite2.0 element-plus login</h4>
            </div>
            <el-form-item prop="username">
              <el-input type="text" v-model="ruleForm.username"
                ><template #prepend><i class="el-icon-user"></i></template
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input type="password" v-model="ruleForm.password">
                <template #prepend><i class="el-icon-unlock"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                style="width: 100px"
                plain
                @click="loginForm"
                >登录</el-button
              >
            </el-form-item>
            <div>
              <el-button type="primary" @click="registerForm">注册</el-button>
            </div>
          </el-form>
        </div></el-col
      >
    </el-row>
  </div>
</template>
<style lang="scss" scoped>
.login {
  height: 100vh;
  background-image: url("../../assets/login_img/background.jpg");
  background-position-x: center;
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: cover;
  .grid-content {
    height: 50px;
  }
  .bg-purple {
    background-color: beige;
  }

  // .login-ruleForm {
  //   // width: 300px;
  // }
}
</style>
